<template>
  <div
    class="flex items-center justify-between px-8 h-[60px] bg-bg-2 text-tc-1 border-b border-solid border-bc-2"
  >
    <div class="flex items-center gap-2 text-xl select-none">
      <span>ACM基地积分管理系统</span>
      <a-tag color="red">开发版</a-tag>
    </div>
    <a-space :size="[24, 0]">
      <a-tooltip>
        <a-button size="large" shape="circle" @click="toggleTheme">
          <guat-icon v-if="isDarkMode" icon="ph:sun-fill" :size="24" />
          <guat-icon v-else icon="ph:moon-fill" :size="24" />
        </a-button>
        <template #content> 切换为{{ isDarkMode ? "白天" : "夜间" }}模式</template>
      </a-tooltip>

      <a-dropdown position="bl">
        <a-tooltip>
          <a-button size="large" shape="circle">
            <guat-icon icon="ph:chat-centered-dots-fill" :size="24" />
          </a-button>
          <template #content>查看消息</template>
        </a-tooltip>
        <template #content>
          <a-card
            :bordered="false"
            :body-style="{
              padding: 0,
            }"
          >
            <a-list :bordered="false">
              <a-list-item v-for="notice in notices">
                <a-list-item-meta :title="notice.title" :description="notice.content">
                </a-list-item-meta>
              </a-list-item>
            </a-list>
            <template #actions>
              <guat-button-group
                :buttons="[{ text: '清空已读' }, { text: '全部已读', type: 'primary' }]"
              />
            </template>
          </a-card>
        </template>
      </a-dropdown>

      <a-tooltip>
        <a-button
          size="large"
          shape="circle"
          @click="$router.replace({ name: RouteName.USER_CENTER })"
        >
          <guat-icon icon="ph:gear-six-fill" :size="24" />
        </a-button>
        <template #content>设置</template>
      </a-tooltip>
      <a-dropdown>
        <a-avatar class="cursor-pointer">
          <img :src="avatar" />
        </a-avatar>
        <template #content>
          <a-doption @click="handleLogout">
            <template #icon>
              <guat-icon icon="ph:sign-out" />
            </template>
            退出登录
          </a-doption>
        </template>
      </a-dropdown>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import avatar from "@/assets/avatar.png";
import { RouteName } from "@/constant/route";
// import useMemberStore from "@/store/member";

const router = useRouter();
// const memberStore = useMemberStore();
const { error } = useModalNotice();
const { success } = useMessage();
const { isDarkMode, toggleTheme } = useTheme();

const handleLogout = () => {
  error({
    title: "退出登录确认",
    content: "请确认是否要退出登录？",
    onOk: () =>
      success({
        content: "退出登录成功",
        onClose: () => {
          router.replace({ name: RouteName.LOGIN });
        },
      }),
  });
};

const notices = [
  { title: "第七周周赛报名已经开启", content: "2023-2024学年第二学期第七周周赛已经开始报名了" },
  {
    title: "第十五届蓝桥杯算法竞赛（省赛）积分已经发放",
    content: "第十五届蓝桥杯算法竞赛（省赛）积分已经发放",
  },
];
</script>

<style scoped></style>
